<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="active"
      finish-status="success"
      simple
      style="margin-top: 20px"
    >
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>

    <info v-if="active === 0" />
    <chapter v-if="active === 1" />
    <publish v-if="active === 2 || active === 3" />
  </div>
</template>

<script>
import Info from "@/views/edu/course/components/Info";
import Publish from "@/views/edu/course/components/Publish";
import Chapter from "@/views/edu/course/components/Chapter";
export default {
  components: { Info, Publish, Chapter },

  data() {
    return {
      active: 0,
      courseId: null,
    };
  },

  created() {
    if (this.$route.name === "EduCourseInfoEdit") {
      this.courseId = this.$route.params.id;
      this.active = 0;
    }
    // 通过$route的name进行判断要调换到那个组件
    if (this.$route.name === "EduCourseChapterEdit") {
      // courseId赋值
      this.courseId = this.$route.params.id;
      this.active = 1;
    }
  },
};
</script>